<template>
  <div>
    <nav>
      <div class="navbar clear">
        <h2 class="fl">{{ name }}</h2>
        <div class="fr">
          <a href="#">概述</a>
          <span>|</span>
          <a href="#">参数</a>
          <span>|</span>
          <a href="#">用户评价</a>
        </div>
      </div>
    </nav>
    <main>
      <div class="container">
        <div class="showbox"><img v-lazy="picurl" /></div>
        <div class="detailsbox">
          <h1>{{ name }}</h1>
          <p>{{ desc }}</p>
          <div class="item-price">
            <span>{{ price }}元</span>
          </div>
          <div class="countbox ">
            <button @click="subtract()" class="subtract">-</button>
            <input type="text" v-model.number="number" />
            <button @click="add()">+</button>
          </div>
          <div class="addbox">
            <a-icon type="environment" />
            <span>广东省 广州市</span>
            <p>有现货</p>
          </div>
          <div class="total">
            合计：<span>{{ number * price }}元</span>
          </div>
          <div class="button">
            <a-button type="primary" @click="showModal"> 加入购物车 </a-button>
            <button style="background-color: black">
              <a-icon type="heart" />加入心愿单
            </button>
            <a-modal
              v-model="visible"
              title="Basic Modal"
              @ok="handleOk"
              okText="前往购物车"
              cancelText="继续购物"
            >
              <p>商品添加成功！</p>
            </a-modal>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import { details } from "@/api/Goods";
// import {addgoods,updategoods} from "@/api/shoppingcart";
export default {
  data() {
    return {
      name: "",
      desc: "",
      price: "",
      picurl: "",
      number: 1,
      id: "",
      goodsList: JSON.parse(localStorage.getItem("goodsList")) || [],
      visible: false,
    };
  },
  methods: {
    add() {
      this.number++;
    },
    subtract() {
      if (this.number <= 1) {
        this.number = 1;
      } else {
        this.number -= 1;
      }
    },
    showModal() {
      var index = this.goodsList.findIndex((item) => {
        return item.id == this.$route.query.id;
      });
      this.visible = true;
      if (index == -1) {
        this.goodsList.unshift({
          name: this.name,
          price: this.price,
          picurl: this.picurl,
          number: this.number,
          isSelect: true,
          id: this.$route.query.id,
        });
        // addgoods(this.$route.query.id,this.number)
        localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      } else {
        this.goodsList[index].number += this.number;
        // updategoods(this.$route.query.id,this.goodsList[index].number).then((res)=>{
        //   console.log(res);
        // })
        localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      }
    },
    handleOk() {
      this.visible = false;
      this.$router.push("/cart");
    },
  },
  created: function () {
    details(this.$route.query.id).then((res) => {
      this.name = res.data.result.name;
      this.desc = res.data.result.desc;
      this.price = res.data.result.price;
      this.picurl = res.data.result.s_photos[0].path;
    });
  },
  watch: {
    goodsList: {
      handler: function () {
        localStorage.setItem("goodsList", JSON.stringify(this.goodsList));
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  nav {
    box-shadow: 0 2px 5px #d7d7d7;
    height: 50px;
    line-height: 50px;
    .navbar {
      margin: 0 auto;
      width: 1200px;
      h3 {
        margin: 0;
      }
      span {
        margin: 0 8px;
        color: #666;
      }
      a {
        color: #666;
      }
    }
  }
  main {
    padding-top: 50px;
    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .showbox {
        width: 400px;
        height: 400px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .detailsbox {
        height: 450px;
        margin-left: 50px;
        width: 500px;
        .item-price {
          margin: 10px 0;
          height: 30px;
          line-height: 30px;
          text-align: center;
          span {
            font-size: 20px;
            color: $color;
          }
          .num {
            margin-left: 10px;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.65);
          }
        }
        .countbox {
          color: black;
          width: 100%;
          border-top: 1px solid black;
          border-bottom: 1px solid black;
          text-align: center;
          height: 35px;
          line-height: 35px;
          margin-bottom: 20px;
          button {
            border: none;
            background-color: white;
            font-size: 20px;
            outline: none;
            height: 30px;
            line-height: 35px;
            cursor: pointer;
          }
          input {
            border: none;
            outline: none;
            text-align: center;
            width: 250px;
            height: 25px;
            line-height: 35px;
          }
        }
        .addbox {
          height: 100px;
          width: 500px;
          position: relative;
          padding: 30px 0 0 40px;
          background-color: #fafafa;
          border: 1px solid #eee;
          .anticon-environment {
            position: absolute;
            top: 32%;
            left: 4%;
          }
          p {
            color: $color;
            white-space: wrap;
          }
        }
        .total {
          margin-top: 20px;
          font-size: 20px;
          span {
            color: $color;
          }
        }
        .button {
          display: flex;
          justify-content: space-around;
          button {
            background-color: $color;
            color: white;
            border: none;
            outline: none;
            width: 200px;
            height: 40px;
            cursor: pointer;
            margin-top: 25px;
            border-radius: 5px;
          }
          .anticon {
            margin-right: 3px;
          }
        }
      }
    }
  }
}
</style>